<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // 1. 左边变量多，数组元素少
        const [a, b, c, d] = [1, 2, 3]
        console.log(a, b, c, d) // d undefined

        // 2. 变量少，元素多
        const [e, f] = [1, 2, 3]

        // 3. 变量少，元素多，可以利用剩余参数接收多余的数组元素
        const [g, h, ...i] = [1, 2, 3, 4, 5, 6]

        // 4. 数组的解构，接着对应的位置赋值
        const [j, k, , l] = [1, 2, 3, 4]

        // 5. 解构赋值，还可以设置默认值(给左侧的变量设定一个初始值)
        const [m = 0, n = 1] = [66, 77]
        // 默认值什么时候生效？
        // eg.1 数组对应的值不存在的时候
        const [o = 0, p = 1] = []
        console.log(o, p)
        // eg.2 严格等于undefined的时候，默认值生效
        const [aa = 0, bb = 1] = ['undefined', undefined]
        console.log(aa, bb)

        // 6. 如果等号右边不是数组,那么会报错
        let [f1] = 1
        let [f2] = false
        let [f3] = NaN
        let [f4] = undefined
        let [f5] = null
        let [f6] = {}
    </script>
</body>

</html>